<template>
  <a-layout-header class="header">
    <div class="logo">
      <router-link style="color:black;font-weight: 500;" to="/">wiki</router-link>
    </div>
    <a v-show="!user.id" class="loginBtn" @click="showLoginModal">
      <span style="color: black;">登录</span>
    </a>
    <a-popconfirm
        cancel-text="取消"
        ok-text="确定"
        title="您确定要退出登录?"
        @confirm="logout"
    >
      <a v-show="!!user.id" class="loginBtn" style="color: black;">
        <span>退出登录</span>
      </a>
    </a-popconfirm>
    <a v-show="!!user.id" class="loginBtn" style="margin-right: 20px;color: black;">
      <span>您好：{{ user.name }}</span>
    </a>
    <a-menu
        :style="{ lineHeight: '64px'}"
        mode="horizontal"
        theme="light"
    >
      <a-menu-item key="/">
        <router-link to="/">首页</router-link>
      </a-menu-item>
      <a-menu-item v-if="!!user.id" key="/admin/user">
        <router-link to="/admin/user">用户管理</router-link>
      </a-menu-item>
      <a-menu-item v-if="!!user.id" key="/admin/ebook">
        <router-link to="/admin/ebook">电子书管理</router-link>
      </a-menu-item>
      <a-menu-item v-if="!!user.id" key="/admin/category">
        <router-link to="/admin/category">分类管理</router-link>
      </a-menu-item>
      <!--      <a-menu-item key="/admin/statistic" v-if="!!user.id">
              <router-link to="/admin/statistic">统计</router-link>
            </a-menu-item>-->
      <a-menu-item key="/about">
        <router-link to="/about">关于我们</router-link>
      </a-menu-item>
    </a-menu>
  </a-layout-header>
  <a-modal
      v-model:visible="visible"
      :confirm-loading="confirmLoading"
      cancel-text="取消"
      ok-text="登录"
      title="用户登录"
      @ok="handleLogin"
  >
    <a-form :label-col="{ span: 6 }" :model="loginUser">
      <a-form-item label="用户名">
        <a-input v-model:value="loginUser.loginName"/>
      </a-form-item>
      <a-form-item label="密码">
        <a-input-password v-model:value="loginUser.password"/>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script lang="ts">
import {computed, defineComponent, ref} from 'vue';
import axios from "axios";
import {message} from "ant-design-vue";
import store from "@/store";

//hexMd5、KEY存放在public，所以识别不到，需要声明一下
declare let hexMd5: any;
declare let KEY: any;

export default defineComponent({
  name: 'the-header',
  setup() {
    const visible = ref(false);
    const confirmLoading = ref(false);
    const loginUser = ref();//用来登录
    loginUser.value = {};
    const user = computed(() => store.state.user);//登录后保存用户信息

    const showLoginModal = () => {
      visible.value = true;
    }
    const handleLogin = () => {
      confirmLoading.value = true;
      //对密码进行MD5加密
      loginUser.value.password = hexMd5(loginUser.value.password + KEY);
      axios.post("/user/login", loginUser.value).then((response) => {
        confirmLoading.value = false;
        const data = response.data;
        if (data.success) {
          visible.value = false;
          message.success("登录成功");
          loginUser.value = {};
          //设置vuex的变量
          store.commit("setUser", data.content);
        } else {
          message.error(data.message);
          loginUser.value = {};
        }
      })
    }

    const logout = () => {
      axios.get("/user/logout/" + user.value.token).then((response) => {
        const data = response.data;
        if (data.success) {
          message.success("退出登录成功");
          store.commit("setUser", {});
        } else {
          message.error(data.message);
        }
      })
    }

    return {
      visible,
      confirmLoading,
      loginUser,
      user,
      handleLogin,
      showLoginModal,
      logout
    }
  }
})
</script>

<style scoped>
.logo {
  width: 150px;
  height: 31px;
  float: left;
  color: #fff;
  font-size: 22px;
}

.loginBtn {
  float: right;
  color: #fff;
  display: block;
}

.header {
  background-color: #fff;
  box-shadow: 0 2px 8px #f0f1f2;
  flex: 0 0 auto;
  border-bottom: 1px solid #f0f0f0;
}
</style>
